<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view>
		<view class="detailsBox">
			文章详情
			<view class="actice">
				<view class="u-page__item">
					<u-collapse accordion @change="changeCollapse" :arrow="false" :head-style="headstyle" :border="false" :accordion="true">
						<u-collapse-item>
							<view slot="title">文档指南</view>
							<view class="show-box">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
			<!-- 文章list列表 -->
			<view class="relation">
				相关文章
			</view>
			<actric-list :list="datalist" type="list"></actric-list>
			<!-- 底部收藏、点赞、分享 -->
			<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :border="false">
				<u-tabbar-item class="islike">
					<image class="u-page__item__slot-icon" slot="active-icon"
						:src="$store.state.baseurl+'/static/image/recommend/collectSelect.png'"></image>
					<image class="u-page__item__slot-icon" slot="inactive-icon"
						:src="$store.state.baseurl+'/static/image/recommend/collect.png'"></image>
					<text slot="text" class="thumb">10</text>
				</u-tabbar-item>
				<u-tabbar-item>
					<image class="u-page__item__slot-icon" slot="active-icon"
						:src="$store.state.baseurl+'/static/image/recommend/likeSelect.png'"></image>
					<image class="u-page__item__slot-icon" slot="inactive-icon" :src="$store.state.baseurl+'/static/image/recommend/like.png'">
					</image>
					<text slot="text" class="thumb">256</text>
				</u-tabbar-item>
				<u-tabbar-item>
					<image class="u-page__item__slot-icon" slot="inactive-icon"
						:src="$store.state.baseurl+'/static/image/recommend/share.png'">
					</image>
					<text slot="text" class="thumb">64</text>
				</u-tabbar-item>
			</u-tabbar>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist: [{
					title: "乌总统：俄乌会谈没取得预期结果",
					text: "当地时间3月1日，乌克兰总统泽连斯基在俄乌会谈结束后表示，目前没有取得预期想达到的结果。俄罗斯方面表达了…",
					avatarUrl: "",
					nickName: "jkasjdka...",
					time: "3天前",
					seeNum: "100",
					zanNum: "100",
					type: 1,

				}, {
					title: "乌总统：俄乌会谈没取得预期结果",
					text: "当地时间3月1日，乌克兰总统泽连斯基在俄乌会谈结束后表示，目前没有取得预期想达到的结果。俄罗斯方面表达了…",
					avatarUrl: "",
					nickName: "jkasjdka...",
					time: "3天前",
					seeNum: "100",
					zanNum: "100",
					type: 2,
				}, {
					title: "乌总统：俄乌会谈没取得预期结果",
					text: "当地时间3月1日，乌克兰总统泽连斯基在俄乌会谈结束后表示，目前没有取得预期想达到的结果。俄罗斯方面表达了…",
					avatarUrl: "",
					nickName: "jkasjdka...",
					time: "3天前",
					seeNum: "100",
					zanNum: "100",
					type: 3,
				}, ]
			}
		},
		computed: {

		},
		onShow() {},
		methods: {
			info() {

			},
			onclick() {

			},
			tabClick() {

			}

		}
	}
</script>
<style>
	.actricBox {
		margin-top: 2rpx !important;
		padding: 16rpx 24rpx !important;
	}

	.actricBox .text {
		line-height: normal !important;
	}
</style>
<style lang="scss" scoped>
	.detailsBox {
		.actice {
			padding: 24rpx;
			background: #FFFFFF;
		}

		.relation {
			margin-top: 16rpx;
			padding: 0 24rpx;
			background: #FFFFFF;
			height: 96rpx;
			line-height: 96rpx;
			font-size: 32rpx;
			color: #000000;
			font-weight: bold;
		}

		.u-tabbar-item__icon image {
			width: 48rpx;
			height: 48rpx;
		}

		.thumb {
			font-size: 22rpx;
			color: #9E9E9E;
		}

	}
</style>
